<template>
  <view class="page custom-page">
    <custom-head gradient back title="添加积分"></custom-head>

    <view class="content">
      <view class="top_name">
        成员: <text class="name_text">{{ membersName }}</text> (共{{selectStudent.length}}人)
      </view>

      <view class="imgList">
          <image 
            class="img" 
            v-for="(item, index) in membersAvatarList"
            :src="item" 
            mode="widthFix"/>
      </view>

      <view class="bgc">奖励项目</view>
    </view>

    <u-tabs-swiper 
        ref="tabs" 
        :list="tabsList" 
        :current="current"
        :is-scroll="false" 
        @change="tabsChange">
    </u-tabs-swiper>
    <view class="line"></view>

    <swiper class="bao_swiper" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">

      <swiper-item class="swiper-item" style="overflow: auto;">
				<scroll-view scroll-y >
					<view class="swiper-div">

						<view class="swiper_item" v-for="(item, index) in dailyList">
              <view class="item_left">
                <view>
                  <image class="img" :src="item.icon" mode="widthFix"/>
                </view>
                <view class="text">{{ item.title }}</view>
                <view class="round">+{{ item.count }}</view>
              </view>

              <view>
                <u-checkbox 
                  @change="checkboxChange(index)" 
                  v-model="item.checked" 
                  shape="circle"
                ></u-checkbox>
              </view>
            </view>

					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item" style="background-color: #f3f4f5; overflow: auto;">
				<scroll-view scroll-y >
					<view class="swiper-div bao_swiper_item">

              <view class="item" v-for="(item, index) in treasureBoxList">

                <view class="item_left">
                  <view ><image class="image" :src="item.img" mode="widthFix" /></view>
                  <view class="info">
                    <view class="title ">
                      <view class="label">{{ item.name }}</view>
                    </view>
                    <p class="red">赠送积分: {{ item.points }}</p>
                  </view>
                </view>
                <view class="item_right">
                  累计: {{ item.total }} 个<u-icon name="arrow-right" color="#8F9399" size="32"></u-icon>
                </view>

              </view>
						
					</view>
				</scroll-view>
			</swiper-item>

    </swiper>

    <view class="buttom_btn">
      <view class="text">成员每组：{{countCmp}} (积分)</view>
      <u-button class="btn" type="primary" @click="handleNext">下一步</u-button>
    </view>

  </view>
</template>
<script>
import { getScore } from '../../api/modules/score';
import { addScore_history } from '../../api/modules/score_history';
import { getTreasure } from '../../api/modules/treasure';
export default {
  data() {
    return {
      tabsList: [{
					name: '日常积分'
				}, {
					name: '成长宝箱积分'
			}],
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      list: [
				{
					name: 'apple',
					checked: true,
					disabled: false
				}
			],
      dailyList: [
        {
          id: 1,
          icon: '../../static/img/homeAdd01.png',
          title: '按时到课',
          count: 3,
          checked: true,
          name: '2222'
        },
        {
          id: 2,
          icon: '../../static/img/homeAdd02.png',
          title: '课堂纪律',
          count: 3,
          checked: false,
        },
        {
          id: 3,
          icon: '../../static/img/homeAdd03.png',
          title: '完成作品',
          count: 3,
          checked: false,
        },
        {
          id: 4,
          icon: '../../static/img/homeAdd04.png',
          title: '知识掌握',
          count: 3,
          checked: false,
        },
        {
          id: 5,
          icon: '../../static/img/homeAdd05.png',
          title: '课后整理',
          count: 3,
          checked: false,
        },
      ],
      membersName: '',
      membersAvatarList: [],
      selectStudent: [], // 选中的学生
      treasureBoxList: [], // 成长宝箱积分
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
    }
  },
  onHide() {
    getApp().globalData.selectStudent = []; // 清楚数据
  },

  mounted() {
    let str = [];
    getApp().globalData.selectStudent.forEach((item, index) => {
      str.push(item.name)
      if (index < 8) {
        this.membersAvatarList.push(item.avatar)
      }
    })
    this.membersName = str.join(',')
    this.selectStudent = getApp().globalData.selectStudent

    console.log('--选中', getApp().globalData.selectStudent)
    this._getScore();
    this._getTreasure()

  },
  computed: {
    countCmp: function () {
      let arr = []
      for(let item of this.dailyList) {
        if (item.checked) {
          arr.push(item.count)
        }
      }
      return arr.reduce((pre, i) => {
        return pre + i
      }, 0)
    }
  },

  methods: {
    handlePopup() {
      console.log('弹出框 ')
    },

    // 选中某个复选框时，由checkbox时触发
		checkboxChange(index) {
			console.log(index, '000', this.dailyList);
		},

    tabsChange(index) {
      console.log('index', index)
      this.current = index
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
        console.log('eee', e)
				// let dx = e.detail.dx;
				// this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				// let current = e.detail.current;
				// this.$refs.uTabs.setFinishCurrent(current);
				// this.swiperCurrent = current;
				// this.current = current;
			},
    handleNext(){ // 批量添加积分
      this._addScore_history();
    },
    _addScore_history() {
      let selectItem = this.dailyList.filter(i => i.checked)
      // console.log('点击', this.dailyList, '--', selectItem)
      // console.log('选中的四个学生', this.selectStudent)

      let arr = []

      for(let i=0; i<selectItem.length; i++) {
        for(let j=0; j<this.selectStudent.length; j++) {

          let data = {
            sid: selectItem[i].sid,
            score_id: selectItem[i].id,
            desc: selectItem[i].desc,
            cnt: selectItem[i].cnt,
            to: this.selectStudent[j].id,
            from: selectItem[i].sid, // from表示谁发的积分 ，一般是当前登录
          }
          arr.push(data)
         
          // addScore_history({
          //   sid: selectItem[i].sid,
          //   score_id: selectItem[i].id,
          //   desc: selectItem[i].desc,
          //   cnt: selectItem[i].cnt,
          //   to: this.selectStudent[j].id,
          //   from: selectItem[i].sid, // from表示谁发的积分 ，一般是当前登录老师的ID
          // }).then(res => {
          //   const { code } = res || {}
          //   if ( code === 201 ) {
          //     uni.navigateTo({
          //       url: '/pages/home/reviseIntegralItem'
          //     })
          //   }
          // })
        }
      }

      for(let i=0; i<this.selectStudent.length; i++) {
        for(let j=0; j<arr.length; j++) {
          if (this.selectStudent[i].id  === arr[j].to) {
            // this.selectStudent[i].integralList.push(arr[j])
            // this.selectStudent[i].integralSum.push(arr[j].cnt)
            // this.selectStudent[i].integralId.push(arr[j].score_id)
          }
        }
      }

      let selectStudentList = this.selectStudent.map(i => ({...i, integral: this.dailyList})).map(i => ({...i, sum: i.integral.filter(j => j.checked).reduce((pre, cur) => pre + cur.cnt, 0)}))

      uni.navigateTo({
        url: `/pages/home/reviseIntegralItem`
      })
      getApp().globalData.selectStudentList = selectStudentList

      // console.log('---选中的学生', this.selectStudent)
      console.log('选中的分数', selectStudentList)

    },

    _getTreasure() {  // 宝箱管理的页面数据
				getTreasure({
          page_no: 1,
          page_size: 10000,
        }).then((res) => {
					const { code, data } = res || {};
					let newList = [];
					if (code === 200) {
            // console.log('--data', data)
						let a = data.list.map((i) => ({...i, img: this.static_uri+i.avatar}));
            this.treasureBoxList = a.filter(i => i.type == 1).filter(i => i.sid === this.glbId)
            // console.log('----', this.treasureBoxList)
					
					}
				})
			},

    _getScore(){ // 获取日常积分
      getScore({
          page_no: 1,
          page_size: 10000,
        }).then((res) => {
        const { code, data } = res || {}
        if (code === 200) {
          this.dailyList = data.list.map(i => ({...i, count: i.cnt, checked: false, icon: `${this.static_uri}${i.icon}`})).filter(i => i.sid === this.glbId);
        }
        console.log('---res 积分', this.dailyList)
      })
    },

  },
}
</script>
<style scoped lang="scss">
.page {
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: #fff;
}

.bao_swiper_item {
  background-color: #f3f4f5;
  margin-top: 21rpx;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 186rpx;
    padding: 25rpx 19rpx 25rpx 28rpx;
    background-color: #fff;
    margin-bottom: 21rpx;

    .item_left{
      display: flex;
      align-items: center;
      .image {
        width: 136rpx;
        height: 136rpx;
        border-radius: 20rpx;
        margin-right: 28rpx;
        /* background: linear-gradient(151deg, #FFFFFF 0%, #FFE39F 100%);
        border: 4rpx solid #F18E00; */
      }

      .label {
        font-size: 32rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        margin-bottom: 13rpx;
      }
      .red {
        font-size: 24rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        color: #F84638;
      }
    }
    .item_right {
      font-size: 24rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      color: #606265;
    }
  }
}

.line {
  border: 1rpx solid #e4e5e6;
}

.bao_swiper {
  height: calc(100% - 586rpx);
}

.content {
  width: 750rpx;
  .top_name {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    margin: 26rpx 42rpx 23rpx;
    .name_text {
      display: inline-block;
      max-width: 200rpx;
      text-overflow:ellipsis;/*省略号 */
      white-space:nowrap;/*溢出时不换行 */
      overflow:hidden;/*溢出时隐藏 */
    }
  }

  
  .imgList {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 35rpx;
   
    .img {
      width: 120rpx !important;
      height: 120rpx !important;
      border-radius: 50%;
      margin-left: -50rpx;
    }
    .img:first-child {
      margin-left: 0;
    }
  }


  .bgc {
    height: 98rpx;
    width: 100%;
    background-color: #f3f4f5;
    text-align: center;
    line-height: 98rpx;
    /* margin-top: 80rpx; */
    font-size: 48rpx;
    font-weight: 700;
  }

}

.swiper_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 21rpx 51rpx 0;
  .item_left {
    display: flex;
    align-items: center;
    justify-content: center;
    .img {
      width: 88rpx !important;
      height: 88rpx !important;
      border-radius: 50%;
    }

    .text {
      font-size: 28rpx;
      margin: 0 58rpx 0 34rpx;
    }
    .round {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 48rpx !important;
      height: 48rpx !important;
      border-radius: 50%;
      background-color: #FFB400;
    }
  }
}


.buttom_btn {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  width: 100%;
  padding: 10rpx 0;

  .text {
    font-size: 30rpx;
    font-weight: 700;
  }

  .btn {
    width: 686rpx;
    height: 88rpx;
    border-radius: 48rpx;
    margin: 0;
    margin-top: 51rpx;
  }
}

</style>
